import React from 'react';
import {
  Box,
  Divider,
  Avatar,
  Button,
  Modal,
  Pressable,
  Text,
  Input,
} from 'native-base';
import {ScrollView} from 'react-native';
import Arrow_SVG from '../public/icons/arrow';
const ExistCommunity = props => {
  //data
  let rawGroups = [
    {
      id: 1,
      name: '大佬们1',
      avatar: 'https://reactnative.dev/img/pwa/manifest-icon-512.png',
      description: '大佬们1ehiofadfnoaofaergohr',
    },
    {
      id: 2,
      name: '大佬们2',
      avatar: 'https://reactnative.dev/img/pwa/manifest-icon-512.png',
      description: '大佬们1ehiofadfnoaofaergohr',
    },
    {
      id: 3,
      name: '大佬们3',
      avatar: 'https://reactnative.dev/img/pwa/manifest-icon-512.png',
      description: '大佬们1ehiofadfnoaofaergohr',
    },
  ]
  const [showModal, setShowModal] = React.useState(false);
  const [groups, setGroups] = React.useState(rawGroups);
  //method

  //render
  return (
    <Box style={{backgroundColor: '#f3f3f3'}}>
      <Box
        style={{
          display: 'flex',
          flexDirection: 'row',
          justifyContent: 'space-between',
          alignItems: 'center',
          backgroundColor: '#fff',
          height: 50,
        }}>
        <Pressable
          style={{marginLeft: 10}}
          onPress={() => {
            props.navigation.goBack();
          }}>
          <Arrow_SVG></Arrow_SVG>
        </Pressable>
        <Text fontWeight={'bold'} fontSize={24}>
          我的圈子
        </Text>
        <Button
          colorScheme={'red'}
          variant={'ghost'}
          style={{marginRight: 10}}
          onPress={() => {
            setShowModal(true);
          }}>
          新建
        </Button>
      </Box>
      <Divider></Divider>
      <Box style={{backgroundColor: '#f3f3f3', padding: 10}}>
        <Input
        onEndEditing={(e)=>{
          let text=e.nativeEvent.text
          if(text) setGroups(rawGroups.filter(item=>item.name.indexOf(text)>=0))
          else setGroups(rawGroups)
        }}
          style={{backgroundColor: '#eee', height: 30}}
          colorScheme={'gray'}
          variant="rounded"
          fontSize={12}></Input>
      </Box>
      <ScrollView>
        {groups.map(item => {
          return (
            <Box
              key={item.id}
              style={{
                display: 'flex',
                flexDirection: 'row',
                justifyContent: 'flex-start',
                alignItems: 'center',
                backgroundColor: '#fff',
                marginTop: 0,
                borderRadius: 10,
                height: 80,
                paddingLeft: 10,
                margin: 10,
              }}>
              <Avatar source={{uri: item.avatar}} size={'lg'}></Avatar>
              <Box style={{marginLeft: 10}}>
                <Text fontSize={20} fontWeight={'bold'}>
                  {item.name}
                </Text>
                <Text fontWeight={'light'}>{item.description}</Text>
              </Box>
              <Button
                variant={'outline'}
                style={{position: 'absolute', right: 20}}
                colorScheme={'red'}
                onPress={()=>{

                }}>
                退出
              </Button>
            </Box>
          );
        })}
      </ScrollView>
      <Modal isOpen={showModal} onClose={() => setShowModal(false)}>
        <Modal.Content maxWidth="400px">
          <Modal.CloseButton />
          <Modal.Header>创建圈子</Modal.Header>
          <Modal.Body>
            <Box>
              <Box style={{display:'flex',flexDirection:'row',justifyContent:'flex-start',alignItems:'center',marginBottom:10}}>
                <Text>名称：</Text>
                <Input style={{height:30}} w={180}></Input>
              </Box>
              <Box style={{display:'flex',flexDirection:'row',justifyContent:'flex-start',alignItems:'center',marginBottom:10}}>
                <Text>描述：</Text>
                <Input style={{height:30}} w={180}></Input>
              </Box>
              <Box style={{display:'flex',flexDirection:'row',justifyContent:'flex-start',alignItems:'center',marginBottom:10}}>
                <Text>头像：</Text>
                <Input style={{height:30}} w={180}></Input>
              </Box>
            </Box>
          </Modal.Body>
          <Modal.Footer>
            <Button.Group space={2}>
              <Button
                variant="ghost"
                colorScheme="blueGray"
                onPress={() => {
                  setShowModal(false);
                }}>
                取消
              </Button>
              <Button
                onPress={() => {
                  setShowModal(false);
                }}>
                提交
              </Button>
            </Button.Group>
          </Modal.Footer>
        </Modal.Content>
      </Modal>
    </Box>
  );
};
export default ExistCommunity;
